<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>爱心传递</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_547056_gqkg6o7rbvi5p14i.css">
    <link rel="stylesheet" href="/sunfc/css/weui.min.css">
    <link rel="stylesheet" href="/sunfc/css/style.css">
    <style>
        .weui-cell{padding:10px 7%}
        .weui-cell:before {border-top: 0px solid #e5e5e5;}
        .weui-cells {margin-top: 10px;background-color: transparent;}
        .weui-cells .weui-cell__bd input{background:#fff;}
        .weui-cells:before {border-top: 15px solid #f4f4f4;}
        .weui-cells:after {border-bottom: 0px solid #e5e5e5;}
        ::-webkit-input-placeholder {
            font-size: 15px;
            color: #CECECE;
        }
        .weui-cells:before{border-top:0;}
        .chuandiBody{background-image: url('/sunfc/images/photo-15.jpg');background-repeat:no-repeat;background-size: 170%;background-position-x: -150px;}
        .chuandiBody .title{color:#b10505;text-align: center;font-size: 40px;font-weight: bold;margin:40px 0;}
        .chuandiBody .shangchuan{border: 1px solid #f4f4f4;overflow:hidden;background:#fafafa;width: 41%;height: 120px;float: left;margin-top:10px;margin-left: 7%;text-align: center}
        .chuandiBody .shangchuan2{border: 1px solid #f4f4f4;overflow:hidden;background:#fafafa;width: 41%;height: 120px;float: right;margin-top:10px;margin-right: 7%;text-align: center;}

    </style>
</head>
<body class="chuandiBody">
<!-- 这里写内容 -->
<div style="">
    <div class="title">
        <p>招募爱心大使</p>
        <p style="font-size:30px;">爱心送考我最行</p>
    </div>
    {if condition="($data.auth_status == 1) OR ($data.auth_status ==2) "}
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input  style="width:97%;border:1px  solid rgb(239,239,244) ;height:40px;border-radius: 5px;padding-left: 3%"  value="{$data.tel}" class="weui-input" type="text" placeholder="请填写手机号码" disabled="disabled">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input  style="width:97%;border:1px  solid rgb(239,239,244) ;height:40px;border-radius: 5px;padding-left: 3%" value="{$data.realname}"  class="weui-input" type="text" placeholder="请填写身份证姓名" disabled="disabled">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input  style="width:97%;border:1px  solid  #f4f4f4;height:40px;border-radius: 5px;padding-left: 3%"  value="{$data.id_card}" class="weui-input" type="text" placeholder="请填写18位身份证号" disabled="disabled">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input  style="width:97%;border:1px  solid  #f4f4f4;height:40px;border-radius: 5px;padding-left: 3%" value="{$data.car_number}"  class="weui-input" type="text" placeholder="请填写车牌号" disabled="disabled">
            </div>
        </div>

        <!--上传后-->
        <div>
            <div class="shangchuan">
                <a href="#">
                    <img src="{$data.driver_license}">
                </a>
            </div>
            <div class="shangchuan2">
                <a href="#">
                    <img src="{$data.vehicle_license}">
                </a>
            </div>
        </div>
        {if condition="$data.auth_status == 1"}
        <div class="weui-cell">
            <div class="weui-cell__bd" style="margin-top:10px;">
                <input  style="width:100%;height:45px;border-radius: 5px;background:#CCCCCC;color:white;" class="weui-input" type="button" value="认证中">
            </div>
        </div>
        {else /}
        <div class="weui-cell">
            <div class="weui-cell__bd" style="margin-top:10px;">
                <input  style="width:100%;height:45px;border-radius: 5px;background:#CCCCCC;color:white;" class="weui-input" type="button" value="已成为爱心大使">
            </div>
        </div>
        {/if}


    </div>
    {else /}
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input id="phone" style="width:65%;border:1px  solid rgb(239,239,244) ;height:40px;border-radius: 5px;padding-left: 3%"   class="weui-input" type="text" placeholder="请填写手机号码">
                <input type="button" id="btn" value="获取验证码" onclick="myFunction(this)" style="display:inline-block;width:28%;float:right;text-align:center;font-size: 13px;height:40px;line-height:40px;border-radius:5px;background:#4B4C5E;color:#fff;" />
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input id="password" style="width:97%;border:1px  solid  #f4f4f4;height:40px;border-radius: 5px;padding-left: 3%"   class="weui-input" type="text" placeholder="请填写手机验证码">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input  style="width:97%;border:1px  solid rgb(239,239,244) ;height:40px;border-radius: 5px;padding-left: 3%" id="realname"  class="weui-input" type="text" placeholder="请填写身份证姓名">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input  style="width:97%;border:1px  solid  #f4f4f4;height:40px;border-radius: 5px;padding-left: 3%" id="idcard"  class="weui-input" type="text" placeholder="请填写18位身份证号">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input id="car_number" style="width:97%;border:1px  solid  #f4f4f4;height:40px;border-radius: 5px;padding-left: 3%"   class="weui-input" type="text" placeholder="请填写车牌号">
            </div>
        </div>
        <div>
            <div class="shangchuan" id="driver_license">
                <img src="/res/img/thumb.png" style="display: none;height: 120px;width: 160px" />
                <span style="line-height: 80px ;color: #cecece" class="icon icon-22jiahao"></span>
                <div style="color: #8D8D8D;font-size: 14px;">上传本人驾照</div>
                <input type="hidden"  value="" >
            </div>
            <div class="shangchuan2" id="vehicle_license">
                <img src="/res/img/thumb.png" style="display: none;height: 120px;width: 160px" />
                <span style="line-height: 80px ;color: #cecece" class="icon icon-22jiahao"></span>
                <div style="color: #8D8D8D;font-size: 14px;">上传本人或他人行驶证</div>
                <input type="hidden"  value="" >
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd" style="margin-top:10px;">
                <input id="uid" type="hidden" value="{$data.uid}">
                <input  style="width:100%;height:45px;border-radius: 5px;background:#4B4C5E;color:white;" class="weui-input" type="button" value="成为爱心大使" id="bt2">
            </div>
        </div>

    </div>
    {/if}

</div>
<script src="/sunfc/js/jquery.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    //
    wx.config({
        debug: false,
        appId: '{$jsconfig.appId}',
        timestamp: '{$jsconfig.timestamp}',
        nonceStr: '{$jsconfig.noncestr}',
        signature: '{$jsconfig.signature}',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
        ]
    });
    wx.isInit = false;

    wx.ready(function () {



        // 5 图片接口
        // 5.1 拍照、本地选图
        var images = {
            localId: [],
            serverId: []
        };




        $('#driver_license').click(function () {
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    console.log('已选择 ' + res.localIds.length + ' 张图片');
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    function upload() {
                        wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res) {

                                i++;
                                console.log('已上传：' + i + '/' + length);
                                //单个上传完成时
//                                record.send_img(res.serverId);

                                $.get('/index/api/tempfile', {mid: res.serverId}, function (res) {
                                    console.log(res);
                                    if(res.code==1){
                                        //app.items.push(res.data);

                                        $('#driver_license span').hide();
                                        $('#driver_license div').hide();
                                        $('#driver_license img').show();
                                        $('#driver_license img').attr('src',res.data.src);
                                        $('#driver_license input').val(res.data.src);
                                    }
                                });

                                images.serverId.push(res.serverId);
                                if (i < length) {
                                    upload();
                                } else {
                                    //全部上传完成时


                                }
                            },
                            fail: function (res) {
                                alert(JSON.stringify(res));
                            }
                        });
                    }

                    upload();

                }
            });
        });
        $('#vehicle_license').click(function () {
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    console.log('已选择 ' + res.localIds.length + ' 张图片');
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    function upload() {
                        wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res) {

                                i++;
                                console.log('已上传：' + i + '/' + length);
                                //单个上传完成时
//                                record.send_img(res.serverId);

                                $.get('/index/api/tempfile', {mid: res.serverId}, function (res) {
                                    console.log(res);
                                    if(res.code==1){
                                        //app.items.push(res.data);
                                        $('#vehicle_license img').attr('src',res.data.src);
                                        $('#vehicle_license span').hide();
                                        $('#vehicle_license div').hide();
                                        $('#vehicle_license img').show();
                                        $('#vehicle_license input').val(res.data.src);
                                    }
                                });

                                images.serverId.push(res.serverId);
                                if (i < length) {
                                    upload();
                                } else {
                                    //全部上传完成时


                                }
                            },
                            fail: function (res) {
                                alert(JSON.stringify(res));
                            }
                        });
                    }

                    upload();

                }
            });
        });




        //分享给朋友
        wx.onMenuShareAppMessage({
            title: "志愿顺风车2018爱心送考，有你参与更精彩", // 分享标题 此处$title可在控制器端传递也可在页面传递 页面传递讲解在下面哦
            desc: "又到了一年一度的高考阶段，为了给莘莘学子提供方便，现面向社会召集广大爱心车友一起爱心送考", //分享描述
            link: "http://didi.aliycl.com/index/love.activity", // 分享链接
            imgUrl: "http://didi.aliycl.com/sunfc/images/logo.png", // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // alert('分享成功');
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
                // alert('取消分享');
            }
        });
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: "志愿顺风车2018爱心送考，有你参与更精彩", // 分享标题
            desc: "又到了一年一度的高考阶段，为了给莘莘学子提供方便，现面向社会召集广大爱心车友一起爱心送考", // 分享描述
            link: "http://didi.aliycl.com/index/love.activity", // 分享链接
            imgUrl: "http://didi.aliycl.com/sunfc/images/logo.png", // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });





    });

    wx.error(function (res) {
        alert(res.errMsg);
    });


</script>
<script>
    // 上传
    $(document).ready(function(){
        $("#bt2").click(function(){
            var iphone            = $("#phone").val();
            var pass_word         = $("#password").val();
            var real_name         = $('#realname').val();
            var idcard            = $('#idcard').val();
            var carnumber         = $("#car_number").val();
            var driverlicense     = $('#driver_license input').val();
            var vehiclelicense    = $('#vehicle_license input').val();
            var u_id              = $("#uid").val();
            if(iphone==null ||iphone==''){
                alert('请输入手机号码');
                return false;
            }
            if(pass_word==null ||pass_word==''){
                alert('请输入验证码');
                return false;
            }
            if(real_name==null ||real_name==''){
                alert('请输入身份证姓名');
                return false;
            }
            if(idcard==null ||idcard==''){
                alert('请输入身份证号码');
                return false;
            }
            if(carnumber==null ||carnumber==''){
                alert('请输入车牌号码');
                return false;
            }
            if(driverlicense ==null || driverlicense==""){
                alert('请上传驾照照片!');
                return false ;
            }
            if(vehiclelicense ==null || vehiclelicense==""){
                alert('请上传行车证照片!');
                return false ;
            }

            $.post("{:url('love.activity/checkIdCard')}",
                {
                    id_card:idcard,
                },
                function(data){
                    if(data.code==1){
                        // 身份证号码正确

                        $.post("{:url('love.activity/application')}",
                            {
                                tel         : iphone,
                                code        : pass_word,
                                realname    : real_name,
                                id_card     : idcard,
                                car_number  : carnumber,
                                uid         : u_id,
                                driver_license:driverlicense,
                                vehicle_license:vehiclelicense,
                            },
                            function(data){
                                if(data.code==1){
                                    alert(data.msg);
                                    window.location.href="{:url('index/love.activity/index')}";
                                }else {
                                    alert('信息提交失败');
                                }
                            });

                    }else {
                        // 身份证号码有误
                        alert(data.msg);
                    }
                });

        });
    });
</script>
<script type="text/javascript">
    var countdown=30;
    function settime(obj) {
        var x=document.getElementById('btn');
        if (countdown == 0) {
            x.removeAttribute("disabled");
            x.value="获取验证码";
            countdown = 30;
            document.getElementById('phone').removeAttribute("disabled");
            return;
        } else {
            x.setAttribute("disabled", true);
            x.value="重新发送(" + countdown + ")";
            countdown--;

        }
        setTimeout(function() {
                settime(obj) }
            ,1000);

    }


    function myFunction() {
        var tel = $('#phone').val()
        //alert(tel);
        if(tel==''){
            // 手机号码未填写
            return false;
        }else{
            // 手机号码填写不为空
            // 判断手机号码是否注册过
            $.post("{:url('love.activity/checkphone')}",{phone : tel},function (res) {
                if(res.code==1){
                    // 手机号码未注册
                    // 锁定输入框
                    document.getElementById('phone').setAttribute("disabled", true);


                    // 判断手机号格式与发送验证码状态
                    $.post('/home/auth/sms',{phone : tel},function (res) {
                        if(res.code==1){
                            // alert(res.msg);
                            settime();
                        }else {
                            alert(res.msg);
                        }

                    });

                }else {
                    // 手机号码已注册，中断操作
                    alert(res.msg);
                    return false;
                }

            });


        }




    }

</script>
</body>
</html>
